// 地图相关
/* 鼠标位置控件层样式设置 */
#mouse-position {
  position: absolute;
  right: 12px;
  bottom: 12px;
  font-size: 18px;
  line-height: 27px;
  z-index: 2000;
  user-select: none;
}
::v-deep #mapCon .ol-zoom {
  left: unset !important;
  right: 0.5em !important;
}
::v-deep #mapCon .ol-zoom .ol-zoom-out {
  margin-top: 204px;
}
::v-deep #mapCon .ol-zoomslider {
  background-color: transparent;
  top: 2.3em;
  left: unset !important;
  right: 0.5em !important;
}
::v-deep #mapCon .ol-touch .ol-zoom .ol-zoom-out {
  margin-top: 212px;
}
::v-deep #mapCon .ol-touch .ol-zoomslider {
  top: 2.75em;
}
::v-deep #mapCon .ol-zoom-in .ol.has-tooltip:hover[role="tooltip"],
::v-deep #mapCon .ol-zoom-in .ol-has-tooltip:focus[role="tooltip"] {
  top: 3px;
}
::v-deep #mapCon .ol-zoom-out .ol-has-tooltip:hover[role="tooltip"],
::v-deep #mapCon .ol-zoon-out .ol-has-out-tooltip:focus[role="tooltip"] {
  top: 232px;
}
::v-deep #mapCon .ol-zoom-extent {
  top: 280px;
  left: unset !important;
  right: 0.5em !important;
}

// 条件查询表单
.conditionQueryBox {
  position: absolute;
  left: 0.5em;
  top: 10px;
  z-index: 3000;
}
// 条件查询结果表格
.condition-resultBox {
  position: absolute;
  left: 0.5em;
  top: 60px;
  z-index: 3000;
}
//空间查询结果表格
.spatial-resultBox {
  position: absolute;
  left: 50%;
  top: 200px;
  transform: translatex(-50%);
  z-index: 3000;
}
::v-deep input.el-input__inner,
.el-button {
  font-size: 16px !important;
  background-color: rgba(34, 52, 87, 0.8) !important;
}
::v-deep .result-card {
  background-color: rgba(34, 52, 87, 0.6) !important;
  border: none;
}
::v-deep .el-table {
  background-color: rgba(34, 52, 87, 0.8) !important;
}
::v-deep .el-table__expanded-cell {
  background-color: rgba(34, 52, 87, 0.8) !important;
}
::v-deep .el-table tr {
  background-color: rgba(34, 52, 87, 0.8) !important;
}
::v-deep .el-table th.el-table__cell {
  background-color: rgba(34, 52, 87, 0.8) !important;
}
::v-deep .el-table__fixed-right-patch {
  background-color: rgba(34, 52, 87, 0.8) !important;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #234282;
  border-radius: 8px;
}
.singe-line {
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
}
.double-line {
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

// el-drawer 评论抽屉
::v-deep .el-drawer.rtl {
  padding-top: 20px;
  height: 89.8%;
  top: 10.2%;
  right: 0%;
  background-color: rgba(34, 52, 87, 0.9);
}
::v-deep .el-drawer__body {
  padding: 4px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #1296db;
    height: 6px;
    border-radius: 8px;
  }
}
.comment-total {
  position: fixed;
  right: 200px;
  top: 10.5%;
  font-size: 14px;
  color: #999aaa;
  user-select: none;
}
.comment-head {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.comment-input-box {
  position: relative;
  height: 166px;
  border: 1px solid #1e75a4;
  border-radius: 4px;
  background-color: #223458;
  .comment-input {
    position: relative;
    width: 368px;
    ::v-deep .el-textarea__inner {
      border: none;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 18px;
      line-height: 27px;
    }
  }
  ::v-deep .comment-btn {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 60px;
    height: 26px;
    font-size: 16px;
    line-height: 0px;
    border: 1px solid #1296db;
    border-radius: 4px;
    background-color: #1296db !important;
  }
}
::v-deep .el-textarea__inner::-webkit-scrollbar {
  width: 2px;
}
::v-deep .el-textarea__inner::-webkit-scrollbar-thumb {
  background-color: #1296db;
  border-radius: 8px;
}
.comment-list {
  margin-top: 12px;
  .comment-item {
    margin-bottom: 8px;

    .comment-item-header {
      position: relative;
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      user-select: none;
      .info {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        margin-left: 10.8px;
        .name {
          color: #1296db;
          font-weight: 500;
        }
        .time {
          font-size: 16px;
          line-height: 24px;
          color: #c8c8c8;
        }
      }
      .tool {
        position: absolute;
        right: 0;
        font-size: 16px;
        line-height: 24px;
        .icon-shanchu {
          color: #ebebeb;
          vertical-align: 25%;
        }
        .icon-huifu {
          color: #ebebeb;
          margin-left: 8px;
          vertical-align: 25%;
        }
      }
    }
    .comment-item-body {
      margin-left: 50.8px;
      margin-top: 2px;
      margin-bottom: 4px;
      span {
        width: 358px;
        word-break: break-all;
        white-space: normal;
        font-size: 18px;
        line-height: 27px;
        color: #d7d7d7;
      }
      .reply-info {
        font-size: 16px;
        line-height: 24px;
        color: #ebebeb;
      }
      .reply-name {
        font-size: 16px;
        line-height: 24px;
        color: #1296db;
        font-weight: 500;
      }
    }
  }
}

.spatial-btn {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 2%;
  transform: translate(-50%, -2%);
  width: 300px;
  height: 44px;
  background-color: rgba(34, 52, 87, 0.9);
  border: 1px solid rgba(30, 117, 164, 0.6);
  border-radius: 8px;
  user-select: none;
  .btn {
    cursor: pointer;
    .iconfont {
      font-weight: 500;
      font-size: 20px;
    }
  }
}

//图层选择
::v-deep .layerControl {
  position: absolute;
  right: 3%;
  top: 8px;
  width: 200px;
  z-index: 3000;
  user-select: none;
  background-color: rgba(34, 52, 87, 0.8);
  border: 1px solid rgba(30, 117, 164, 0.4);
  .el-button {
    background-color: transparent !important;
    i{
      color: #d3d6dd;
    }
  }
  .el-card__header {
    padding: 8px;
  }
  .el-radio {
    margin: 4px 0;
  }
  .el-radio__label {
    font-size: 16px !important;
  }
  .el-radio__input.is-checked + .el-radio__label {
    color: #6290c8 !important;
    text-shadow: 0 0 1px #6290c8;
  }
}
::v-deep .noneCheckLayer {
  .el-card__body {
    display: none;
  }
}
